<!DOCTYPE html>
<html>
<head>
    <title>Relativity Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="400" style="border: 1px solid #ccc;"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Helper function to draw an arrow
    function drawArrow(fromx, fromy, tox, toy) {
        const headlen = 10;
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // --- Main Drawing ---

    // 1. Coordinate System
    const originX = 80;
    const originY = 350;
    const xAxisEnd = 450;
    const yAxisStart = 50;

    // Draw axes with arrows
    drawArrow(originX, originY, xAxisEnd, originY); // x-axis
    drawArrow(originX, originY, originX, yAxisStart); // y-axis

    // Labels for axes
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('O', originX - 20, originY + 15);
    ctx.fillText('x', xAxisEnd + 10, originY);
    ctx.fillText('y', originX, yAxisStart - 15);
    
    // S-frame label (using a font that supports Chinese characters)
    ctx.font = '22px "Songti SC", "SimSun"';
    ctx.fillText('S系', originX - 45, originY - 200);
    ctx.font = 'italic 20px Times New Roman'; // Reset font

    // 2. The Square Panel
    const squareSize = 130;
    const squareStartX = 180;
    const squareStartY = 120;

    // Vertices coordinates
    const A = { x: squareStartX, y: squareStartY };
    const B = { x: squareStartX, y: squareStartY + squareSize };
    const C = { x: squareStartX + squareSize, y: squareStartY + squareSize };
    const D = { x: squareStartX + squareSize, y: squareStartY };

    // Draw the square
    ctx.strokeRect(A.x, A.y, squareSize, squareSize);

    // Labels for the square vertices
    ctx.fillText('A', A.x - 15, A.y - 10);
    ctx.fillText('B', B.x - 15, B.y + 15);
    ctx.fillText('C', C.x + 15, C.y + 15);
    ctx.fillText('D', D.x + 15, D.y - 10);

    // Labels for the lengths
    ctx.fillText('L', A.x + 20, A.y + squareSize / 2);
    ctx.fillText('(L)', B.x + squareSize / 2, B.y - 20);

    // 3. Velocity Vector
    const arrowY = squareStartY + squareSize / 2;
    const arrowStartX = D.x + 20;
    const arrowEndX = arrowStartX + 70;

    drawArrow(arrowStartX, arrowY, arrowEndX, arrowY);
    ctx.fillText('v', arrowEndX + 15, arrowY);

</script>
</body>
</html>